<div class="cne-breadcrumb flex flex-1 flex-row">
  <!-- 移动端：显示当前页面标题 -->
  @if (lastBreadcrumb(); as breadcrumb) {
    <h1 class="flex-1 gt-sm:!hidden">
      {{ getBreadcrumbLabel(breadcrumb) }}
    </h1>
  }
  
  <!-- 桌面端：显示完整面包屑路径 -->
  @for (breadcrumb of breadcrumbs(); track breadcrumb.id; let isLast = $last) {
    <span class="lt-md:!hidden">
      @if (!isLast) {
        <a [routerLink]="breadcrumb.link" [queryParams]="breadcrumb.queryParams">
          @if (showIcons()) {
            <mat-icon>{{ breadcrumb.icon }}</mat-icon>
          }
          {{ getBreadcrumbLabel(breadcrumb) }}
        </a>
        <span class="divider">/</span>
      } @else {
        <span>
          @if (showIcons()) {
            <mat-icon>{{ breadcrumb.icon }}</mat-icon>
          }
          {{ getBreadcrumbLabel(breadcrumb) }}
        </span>
      }
    </span>
  }
</div>
